<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        :btns="btns"
        :width="dialogWidth"
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <user-info ref="childRef" :init-data.sync="dialogObj.initData"></user-info>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
import userInfo from './userInfo'

export default {
  name: 'userManage',
  mixins: [mixinTable],
  components: {
    CDialog,
    userInfo
  },
  data(vm) {
    return {
      dialogObj: {}, // 对话框数据
      tableList: [{ id: 1 }],
      tableInnerBtns: [
        {
          name: '查看详情',
          icon: 'el-icon-view',
          handle(row) {
            vm.showDialog({
              initData: {
                orderNo: row.orderNo
              },
              showType: 2,
              title: '用户详情'
            })
          }
        },
        {
          name: '拉黑',
          icon: 'el-icon-delete',
          handle(row) {
            vm.delItem(row)
          }
        }
      ],
      tableHeader: [
        {
          label: '用户ID',
          prop: 'id',
          width: 120,
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '姓名',
          prop: 'goodsName',
          width: 200,
          search: {
            type: 'input'
          }
        },
        {
          label: '手机号码',
          prop: 'goodsName',
          width: 200,
          search: {
            type: 'input'
          }
        },
        {
          label: '性别',
          prop: 'brandName',
          search: {
            type: 'dict',
            optionsList: [],
            allowCreate: true,
            filterable: true
          }
        },
        {
          label: '注册时间',
          prop: 'categoryName',
          search: {
            prop: 'dateTime',
            type: 'dateTime'
          }
        },
        {
          label: '职业',
          prop: 'marketable',
          width: 100
        },
        {
          label: '现居住地',
          prop: 'memberPrice',
          width: 100
        },
        {
          label: '绑定宠物',
          prop: 'mktPrice',
          width: 100
        }
      ],
      btns: [{ label: '关 闭', name: 'cancel' }],
      dialogWidth: '840px'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /**
     * 获取表格数据
     */
    fetchData() {},
    /**
     * 对话框确认按钮，集成了表单提交功能
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const childFormModel = childRef.formModel
          if (!this.dialogObj.isEdit) {
            this.addHandle()
          } else {
            this.editHandle(childFormModel)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    showDialog(opts) {
      console.log('184===', opts.initData)
      this.dialogObj = {
        isShow: true,
        title: opts.title,
        isEdit: opts.isEdit || false,
        initData: {
          goodsName: '1',
          brandName: '2'
        }
      }
    },
    /**
     * 确认新增操作
     */
    addHandle() {
      // codeing ajax
      // ajax成功方法里面加入 关闭对话框标识
      this.dialogObj.isShow = false
    },
    /**
     * 确认修改操作
     */
    editHandle() {
      // codeing ajax
      // ajax成功方法里面加入 关闭对话框标识
      this.dialogObj.isShow = false
    },
    changePagination() {},
    delItem() {}
  }
}
</script>
